<template>
  <div class="pagebody">
    <StickHead></StickHead>
    <div class="headtop bgfff text-al-center fz30">问题记录处理</div>
    <div class="pagebox">
      <div class="info br20 bgfff">
        <div class="justify-between mb20">
          <div class="left color000 fz24">公司名称</div>
          <div v-if="lock" class="right fz24 fwbold">
            {{
              problem.enterprise.enterpriseName
                ? problem.enterprise.enterpriseName
                : "未知"
            }}
          </div>
        </div>
        <div class="justify-between">
          <div class="left color000 fz24">联系人</div>
          <div v-if="lock" class="right fz24 fwbold">
            {{ problem.enterprise.contactPerson }}
          </div>
        </div>
      </div>
      <div class="info br20 bgfff">
        <div class="justify-between mb20">
          <div class="left color000 fz24">标题</div>
          <div class="blackright fz24 fwbold">
            {{ problem.title }}
          </div>
        </div>
        <div class="justify-between mb20">
          <div class="left color000 fz24">日期</div>
          <div v-if="lock" class="blackright fz24 fwbold">
            {{ problem.createTime.slice(0, 10) }}
          </div>
        </div>
        <div class="justify-between mb20">
          <div class="left color000 fz24">问题分类</div>
          <div class="blackright fz24 fwbold">{{ problem.questionType }}</div>
        </div>
        <div class="flex-col mb20">
          <div class="left color000 fz24">问题详情</div>
          <div class="procontent fz24 mt16 br12" v-html="problem.content"></div>
        </div>
        <div class="flex-col mb20">
          <div class="left color000 fz24">附件</div>
          <ul
            class="filelist flex-row mt16"
            v-for="item in fileList"
            :key="item.id"
          >
            <li><img  class="problem_img" :src="item.url" alt="" /></li>
          </ul>
        </div>
      </div>
      <div class="info br20 bgfff">
        <div class="flowbox borderbox pos-rel">
          <div class="clis pos-abs"></div>
          <div class="topbox flex-row align-center justify-between">
            <div class="boxtitle fz24 fwbold">问题提出</div>
            <div v-if="lock" class="time fz22 color999">
              {{ problem.createTime.slice(0, 10) }}
            </div>
          </div>
          <div v-if="lock" class="person fz24 mt20 color000">
            {{
              problem.enterprise.enterpriseName
                ? problem.enterprise.enterpriseName
                : "未知"
            }}--{{ problem.enterprise.contactPerson }}
          </div>
        </div>
        <div
          class="flowbox borderbox pos-rel"
          v-for="item in scheduleList"
          :key="item.id"
        >
          <div class="clis pos-abs"></div>
          <div class="topbox flex-row align-center justify-between">
            <div class="boxtitle fz24 fwbold">问题回复</div>
            <div v-if="lock" class="time fz22 color999">
              {{ item.createTime.slice(0, 10) }}
            </div>
          </div>
          <div class="person fz24 mt20 color000">{{ item.createName }}</div>
          <div class="person fz24 mt20 color000">{{ item.flowContent }}</div>
        </div>
        <!-- <div class="flowbox borderbox pos-rel" v-if="problem.resolved==1">
          <div class="clis pos-abs"></div>
          <div class="topbox flex-row align-center justify-between">
            <div class="boxtitle fz24 fwbold">问题解决</div>
            <div class="time fz22 color999">{{problem.updateTime}}</div>
          </div>
          <div class="person fz24 mt20 color000">
            {{problem.updateName}}
          </div>
          <div class="person fz24 mt20 color000">
            已解决
          </div>
        </div> -->
      </div>
      <div class="btn_div" v-if="flag == 0">
        <van-button class="btn" type="info" @click="reply">回复</van-button>
        <van-button class="btn1" type="danger" @click="stop">终止</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import StickHead from "@/layout/StickHead.vue";
import StickFoot from "@/layout/StickFoot.vue";
import {
  getenterprise,
  getQuestion,
  getFileList,
  getQuestionScheduleList,
  updateQuestion,
} from "@/api/api";
import { Toast } from "vant";

export default {
  name: "ProblemDetil",
  components: {
    StickHead,
    StickFoot,
  },
  data() {
    return {
      id: null,
      enterprise: {},
      problem: {},
      fileList: [],
      scheduleList: [],
      flag: "",
      lock: false,
    };
  },

  created() {
    this.id = this.$route.params.id;
    this.flag = this.$route.query.flag;
  },
  mounted() {
    this.getQuestion();
    //this.getFileList();
    this.getQuestionScheduleList();
  },
  methods: {
    getQuestion() {
      getQuestion(this.id).then((res) => {
        this.problem = res.data.data;
        console.log("problem:",this.problem)
        this.fileList = this.problem.attachFileList;
        console.log("file:",this.fileList)
        this.lock = true;
      });
    },
    // getFileList() {
    //   let params = {
    //     fileClass: "01",
    //     sourceId: this.id,
    //   };
    //   getFileList(params).then((response) => {
    //     this.fileList = response.data.rows;
    //   });
    // },
    getQuestionScheduleList() {
      let params = {
        questionId: this.id,
      };
      getQuestionScheduleList(params).then((response) => {
        this.scheduleList = response.data.rows;
      });
    },
    stop() {
      let params = {
        id: this.id,
        resolved: 1,
      };
      updateQuestion(params).then((response) => {
        if (response.data.code == 200) {
          Toast.success("保存成功！");
          this.$router.push("/");
        } else {
          Toast.success("保存失败，请联系管理员！");
        }
      });
    },
    reply() {
      this.$router.push({ name: "reply", params: { id: this.id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.pagebody {
  background-color: #f6f8fb;
  .headtop {
    line-height: 0.8rem;
    height: 0.8rem;
  }
  .pagebox {
    padding: 0.16rem 0.24rem;
    .info {
      margin-bottom: 0.34rem;
      padding: 0.34rem 0.24rem;
      box-sizing: border-box;
      .right {
        color: #64a3de;
        width: 5rem;
        text-align: end;
      }
      .blackright {
        color: #000;
        width: 5rem;
        text-align: end;
      }
      .procontent {
        padding: 0.24rem;
        background: #f6f7fb;
      }
      .filelist {
        li {
          margin-right: 0.24rem;
          img {
            width: 1.2rem;
          }
        }
      }
      .flowbox {
        border-left: 1px dashed #e5e5e5;
        min-height: 1.4rem;
        padding: 0.24rem;
        .clis {
          width: 0.14rem;
          height: 0.14rem;
          background: #e5e5e5;
          border-radius: 50%;
          left: -0.07rem;
          top: 0;
        }
        .topbox {
          position: absolute;
          top: -0.07rem;
          width: -webkit-fill-available;
          padding-right: 0.24rem;
          .boxtitle {
            color: #03b45d;
          }
        }
      }
      .flowbox:last-child {
        border-left: none;
      }
    }
  }
  .btn_div {
    text-align: center;
    margin-top: -0.7rem;
    padding: 0.3rem 0;
  }
  .btn {
    padding: 0 1rem;
  }
  .btn1 {
    padding: 0 1rem;
    margin-left: 0.5rem;
  }
}
</style>